
@import '../../../scss/colors.scss';

$border-color: rgba(22,124,240,1);
$border-color-to:rgba(26,168,198,1);

.cards-container{
    
    a {
        text-decoration:none;
        color:none;
    };
    .card{
        cursor:pointer;
        font-size: $list-f-size;
        width: 210px;
        height: 90px;
        border: 1px dashed $span-color;
        border-radius: $radius-size;
        border-radius: $radius-size;
        line-break: 9px;
        line-height: 9px;
        padding-left: 20px;
        margin-top: 10px;
        .text-c{
            overflow: hidden;
            text-overflow: clip;
            white-space: nowrap; 
            width: 170px;
            .card-title{
                margin-top: 15px;
                font-weight: 550;
            };
        };
        &:hover{
            border: $border-line;
        };
    };

    .noCard{
        margin: 0 auto;
        cursor:pointer;
        font-size: $list-f-size;
        width: 210px;
        height: 90px;
        border: 1px dashed $border-color;
        border-radius: $radius-size;
        border-radius: $radius-size;
        line-break: 9px;
        line-height: 9px;
        padding-left: 20px;
        margin-top: 10px;
        .noCard-text{
            margin-top: 33px;
            font-size: 16px;
            color: $border-color;
            p{
                font-size: 55px;
            };
            span{
                line-height: 22px;
                margin-left: 31px;
            };
        };
        &:hover{
            border: 1px solid $border-color;
        };
    };
    .active{
        border: none;
        color: $bg-color;
        background-image: -webkit-linear-gradient(160deg,$border-color-to 20%,$border-color 80%);
        background-image: -moz-linear-gradient(160deg,$border-color-to 20%,$border-color 80%);
        background-image: linear-gradient(160deg,$border-color-to 20%,$border-color 80%);
    };
};
